import { createSlice } from '@reduxjs/toolkit';

// 从 localStorage 获取初始主题模式，如果不存在则使用默认值
const getInitialTheme = () => {
  try {
    const savedTheme = localStorage.getItem('darkTheme');
    return savedTheme ? JSON.parse(savedTheme) : false;
  } catch (e) {
    console.error('从 localStorage 读取主题模式失败:', e);
    return false;
  }
};

// 从 localStorage 获取初始布局类型，如果不存在则使用默认值
const getInitialLayoutType = () => {
  try {
    return localStorage.getItem('layoutType') || 'default';
  } catch (e) {
    console.error('从 localStorage 读取布局类型失败:', e);
    return 'default';
  }
};

// 从 localStorage 获取初始组件大小，如果不存在则使用默认值
const getInitialComponentSize = () => {
  try {
    return localStorage.getItem('componentSize') || 'middle';
  } catch (e) {
    console.error('从 localStorage 读取组件大小失败:', e);
    return 'middle';
  }
};

// 从 localStorage 获取初始专注模式状态，如果不存在则使用默认值
const getInitialFocusMode = () => {
  try {
    const savedFocusMode = localStorage.getItem('focusMode');
    return savedFocusMode ? JSON.parse(savedFocusMode) : false;
  } catch (e) {
    console.error('从 localStorage 读取专注模式状态失败:', e);
    return false;
  }
};

// 初始状态
const initialState = {
  darkTheme: getInitialTheme(),
  themeSwitchPosition: null,
  layoutType: getInitialLayoutType(), // 添加布局类型，默认从 localStorage 获取或使用 default
  componentSize: getInitialComponentSize(), // 添加组件大小状态
  fullscreen: getInitialFocusMode() // 添加专注模式状态
};

// 创建 theme slice
const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    toggleTheme: (state, action) => {
      // 切换主题时记录点击位置，用于扩散动画
      state.darkTheme = !state.darkTheme;
      // 保存主题设置到 localStorage
      try {
        localStorage.setItem('darkTheme', JSON.stringify(state.darkTheme));
      } catch (e) {
        console.error('Failed to save darkTheme to localStorage:', e);
      }
      // 如果 action.payload 存在坐标信息，则使用它作为点击位置
      if (action.payload && 
          typeof action.payload === 'object' && 
          'x' in action.payload && 
          'y' in action.payload) {
        state.themeSwitchPosition = action.payload;
      } else {
        state.themeSwitchPosition = null;
      }
    },
    setTheme: (state, action) => {
      state.darkTheme = action.payload;
      // 保存主题设置到 localStorage
      try {
        localStorage.setItem('darkTheme', JSON.stringify(action.payload));
      } catch (e) {
        console.error('Failed to save darkTheme to localStorage:', e);
      }
    },
    setThemeSwitchPosition: (state, action) => {
      state.themeSwitchPosition = action.payload;
    },
    // 添加切换布局类型的方法
    setLayoutType: (state, action) => {
      state.layoutType = action.payload;
      // 同时将布局类型保存到 localStorage
      try {
        localStorage.setItem('layoutType', action.payload);
      } catch (e) {
        console.error('Failed to save layoutType to localStorage:', e);
      }
    },
    // 添加设置组件大小的方法
    setComponentSize: (state, action) => {
      state.componentSize = action.payload;
      // 同时将组件大小保存到 localStorage
      try {
        localStorage.setItem('componentSize', action.payload);
      } catch (e) {
        console.error('Failed to save componentSize to localStorage:', e);
      }
    },
    // 添加设置专注模式状态的方法
    setFullscreen: (state, action) => {
      state.fullscreen = action.payload;
      // 同时将专注模式状态保存到 localStorage，使用focusMode键名
      try {
        localStorage.setItem('focusMode', JSON.stringify(action.payload));
      } catch (e) {
        console.error('Failed to save focusMode to localStorage:', e);
      }
    },
    // 切换专注模式状态
    toggleFullscreen: (state) => {
      state.fullscreen = !state.fullscreen;
      // 同时将专注模式状态保存到 localStorage，使用focusMode键名
      try {
        localStorage.setItem('focusMode', JSON.stringify(state.fullscreen));
      } catch (e) {
        console.error('Failed to save focusMode to localStorage:', e);
      }
    }
  }
});

// 导出 actions
export const { 
  toggleTheme, 
  setTheme, 
  setThemeSwitchPosition, 
  setLayoutType, 
  setComponentSize,
  setFullscreen,
  toggleFullscreen
} = themeSlice.actions;

// 导出 reducer
export default themeSlice.reducer;